<template>
    <view class="register l-whitespace">
        <!-- 使用非原生导航栏后需要在页面顶部占位 -->
        <view style="height:80px;"></view>
        <view class="register-title color1">注册账号</view>
        <view class="register-from">
            <view class="register-from-wrap">
                <view class="field-item">
                    <view class="field-item-title">您的姓名</view>
                    <van-field clearable placeholder="请输入您的真实姓名" @change="cName"/>
                </view>
                <view class="field-item">
                    <view class="field-item-title">手机号码</view>
                    <van-field clearable type="number" placeholder="手机号码" @change="cPhone"/>
                </view>
                <view class="field-item">
                    <view class="field-item-title">短信验证码</view>
                    <van-field
                        clearable
                        type="number"
                        placeholder="验证码"
                        use-button-slot
                        @change="cVerification"
                    >
                        <view
                            class="register-from-sms"
                            :class="{'activeSMS': ifSMS}"
                            @tap="sendCode"
                            slot="button"
                        >{{ timer.text }}</view>
                    </van-field>
                </view>
                <view class="field-item">
                    <view class="field-item-title">设置登录密码</view>
                    <van-field
                        clearable
                        type="password"
                        placeholder="6-20位,由字母、数字或特殊字符组成"
                        @change="cPassword"
                    />
                </view>
                <view class="field-item">
                    <view class="field-item-title">确认登录密码</view>
                    <van-field
                        clearable
                        type="password"
                        placeholder="确认您的登录密码"
                        @change="cPassword2"
                    />
                </view>
                <view class="field-item">
                    <view class="field-item-title">设置二级密码</view>
                    <van-field
                        clearable
                        type="password"
                        placeholder="6-20位,由字母、数字或特殊字符组成"
                        @change="cPayPassword"
                    />
                </view>
                <view class="field-item">
                    <view class="field-item-title">确认二级密码</view>
                    <van-field
                        clearable
                        type="password"
                        placeholder="确认您的二级密码"
                        @change="cPayPassword2"
                    />
                </view>
                <view class="field-item">
                    <view class="field-item-title">邀请人</view>
                    <van-field clearable type="number" placeholder="邀请人手机号码" @change="cInvite"/>
                </view>
            </view>
            <view class="register-btn">
                <van-button
                    size="large"
                    custom-class="register-btn-reset"
                    :loading="loading"
                    @click="onSubmit"
                >注册</van-button>
            </view>
        </view>
    </view>
</template>

<script>
import * as reg from "../../../common/utils/reg.js";
import { mapActions, mapGetters } from "vuex";
export default {
    data() {
        return {
            ifSMS: false,
            loading: false,
            from: {
                realName: "",
                phone: "",
                verification: "",
                password: "",
                password2: "",
                payPassword: "",
                payPassword2: "",
                invite: ""
            },
            timer: {
                func: "",
                count: "",
                text: "获取"
            } // 倒计时
        };
    },
    computed: {},
    onLoad() {},
    methods: {
        sendCode() {
            const regPhone = reg.regPhone(this.from.phone);
            if (regPhone) {
                uni.showToast({
                    title: regPhone,
                    icon: "none"
                });
                return;
            }
            if (this.ifSMS) return;
            if (this.timer.count > 0) return;
            this.ifSMS = true;
            this.$http
                .sendCode({
                    phone: this.from.phone
                })
                .then(res => {
                    if (res.data.success) {
                        uni.showToast({
                            title: "发送成功",
                            icon: "none"
                        });
                        this.timer.count = 59;
                        this.ifSMS = false;
                        this.timer.func = setInterval(() => {
                            this.timer.count--;
                            this.timer.text = this.timer.count + "s";
                            if (this.timer.count <= 0) {
                                this.timer.text = "获取";
                                clearInterval(this.timer.func);
                            }
                        }, 1000);
                        return;
                    }
                    uni.showToast({
                        title: res.data.errMsg,
                        icon: "none"
                    });
                })
                .catch(err => {
                    this.ifSMS = false;
                });
        },
        onSubmit() {
            if (this.loading) return;
            const regSubmit = reg.regSubmit(this.from);
            if (regSubmit) {
                uni.showToast({
                    title: regSubmit,
                    icon: "none"
                });
                return;
            }
            this.loading = true;
            this.$http
                .register({
                    name: this.from.realName,
                    phone: this.from.phone,
                    authCode: this.from.verification,
                    pwd: this.from.password,
                    pwdtwo: this.from.payPassword,
                    rephone: this.from.invite
                })
                .then(res => {
                    const data = res.data;
                    this.loading = false;
                    if (data.success) {
                        uni.showToast({
                            title: "注册成功",
                            icon: "none"
                        });
                        setTimeout(() => {
                            uni.navigateBack();
                        }, 500);
                        return;
                    }
                    uni.showToast({
                        title: data.errMsg,
                        icon: "none"
                    });
                });
        },
        cName(e) {
            this.from.realName = e.detail;
        },
        cPhone(e) {
            this.from.phone = e.detail;
        },
        cVerification(e) {
            this.from.verification = e.detail;
        },
        cPassword(e) {
            this.from.password = e.detail;
        },
        cPassword2(e) {
            this.from.password2 = e.detail;
        },
        cPayPassword(e) {
            this.from.payPassword = e.detail;
        },
        cPayPassword2(e) {
            this.from.payPassword2 = e.detail;
        },
        cInvite(e) {
            this.from.invite = e.detail;
        }
    }
};
</script>

<style lang="scss" scoped>
@import "../../../common/user.scss";
.register {
}
</style>
